<template>
  <el-drawer
    v-model="open"
    title="评价详情"
    :with-header="true"
    size="85%"
    class="comment-detail-drawer"
    :close-on-click-modal="false"
    :before-close="closeW"
  >
    <div style="font-size: 24px; margin-bottom: 30px">
      <el-row :gutter="10" class="mb8">
        <el-col :span="12">
          {{ currentItem && currentItem.className }}
        </el-col>
      </el-row>
    </div>
    <el-space fill wrap direction="horizontal" style="width: 100%">
      <el-card shadow="never" header="课次信息">
        <el-form :model="form" label-width="100px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="上课时间">
                {{ form.classDate && form.classDate.slice(0, 10) + "   " }}
                {{ form.classStartTime + " ~ " + form.classEndTime }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="授课课程">
                {{ form.courseNameC }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="主班老师">
                {{ form.teacherName }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="助教老师">
                {{ form.assistantName }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="上课教室">
                {{ form.classRoomName }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="上课内容">
                {{ form.description }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="点名时间">
                {{
                  form.callTime &&
                  form.callTime.slice(0, 10) +
                    "    " +
                    form.callTime.slice(11, 19)
                }}
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>

      <el-card shadow="never">
        <CommentList :classId="currentItem.classId" ref="downList" />
      </el-card>
    </el-space>
  </el-drawer>
</template>

<script setup>
import { getRollCallDetailAPI } from "@/api/registrar/class";
import CommentList from "./commentList.vue";
import { nextTick } from "vue";
const { proxy } = getCurrentInstance();
const loading = ref(false);
const open = ref(false);
const data = reactive({
  form: {},
  currentItem: {},
});
const { form, currentItem } = toRefs(data);
const downList = ref(null);

function getDetail() {
  getRollCallDetailAPI({ id: currentItem.value.orderId }).then((response) => {
    form.value = response.data;
  });
}

function getDownList() {
  nextTick(() => {
    downList.value.initPage(currentItem.value);
  });
}

function initPage() {
  getDetail();
  getDownList();
}

function openW(item) {
  open.value = true;
  currentItem.value = item;
  initPage();
}

function closeW() {
  open.value = false;
}

defineExpose({ openW }); // 用于父组件调用
</script>

<style lang="scss" scoped></style>
